<template>
  <el-container>
  <el-header>
  <div style="background-color: #2776df;height: 81px;color: #fafafa;font-size: 25px;">
    <div style="padding: 25px 10px;float: left;"><el-icon class="el-icon-s-fold"></el-icon>在线测试-{{exam.title}}</div>
    <div style="float: right;padding: 25px 25px;"><el-icon class="el-icon-user"></el-icon>{{userInfo.name}}</div>
  </div>
  </el-header>
  <el-main>
    <div style="height: 625px;background-color: rgb(238,238,238)">
      <div class="left">
        <div style="width: 100%;height: 50px;background-color: rgb(255,255,255);padding: 10px 5px;">
          <el-icon class="el-icon-star-off" style="font-size: 25px"></el-icon>未答
          <el-icon class="el-icon-star-on" style="font-size: 25px;"></el-icon>已答
<!--          <el-icon class="el-icon-collection-tag" style="font-size: 25px;"></el-icon>标记-->
        </div>
        <div style="width: 100%;height: 400px;background-color: rgb(255,255,255);margin-top: 10px;padding:5px;">
          计算题:<br>
          <p style="cursor: pointer;">
            <span id="question1" @click="showProblem(problemIds[0])">1<el-icon v-if="answers[0] === null" class="el-icon-star-off" style="font-size: 25px"></el-icon><el-icon v-else class="el-icon-star-on" style="font-size: 25px"></el-icon></span>
            <span id="question2" @click="showProblem(problemIds[1])">2<el-icon v-if="answers[1] === null" class="el-icon-star-off" style="font-size: 25px"></el-icon><el-icon v-else class="el-icon-star-on" style="font-size: 25px"></el-icon></span>
            <span id="question3" @click="showProblem(problemIds[2])">3<el-icon v-if="answers[2] === null" class="el-icon-star-off" style="font-size: 25px"></el-icon><el-icon v-else class="el-icon-star-on" style="font-size: 25px"></el-icon></span>
            <span id="question4" @click="showProblem(problemIds[3])">4<el-icon v-if="answers[3] === null" class="el-icon-star-off" style="font-size: 25px"></el-icon><el-icon v-else class="el-icon-star-on" style="font-size: 25px"></el-icon></span>
            <span id="question5" @click="showProblem(problemIds[4])">5<el-icon v-if="answers[4] === null" class="el-icon-star-off" style="font-size: 25px"></el-icon><el-icon v-else class="el-icon-star-on" style="font-size: 25px"></el-icon></span>
          </p>
          应用题:<br>
          <p style="cursor: pointer;">
            <span id="question6" @click="showProblem(problemIds[5])">6<el-icon v-if="answers[5] === null" class="el-icon-star-off" style="font-size: 25px"></el-icon><el-icon v-else class="el-icon-star-on" style="font-size: 25px"></el-icon></span>&nbsp&nbsp
            <span id="question7" @click="showProblem(problemIds[6])">7<el-icon v-if="answers[6] === null" class="el-icon-star-off" style="font-size: 25px"></el-icon><el-icon v-else class="el-icon-star-on" style="font-size: 25px"></el-icon></span>
          </p>
          <el-button type="primary" style="width: 100%;margin-top: 195px;" @click="dialogVisible = true">结束考试</el-button>
          <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%">
            <span>确认提交吗?</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="computeScore()">确 定</el-button>
            </span>
          </el-dialog>
          <el-dialog
            title="结果"
            :visible.sync="dialogVisible1"
            width="30%">
            <span>您的分数:{{score}}</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible1 = false">取 消</el-button>
              <el-button type="primary" @click="exitTest">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
      <div class="right">
        <div style="width: 100%;height: 35px;background-color: rgb(255,255,255);padding-top: 5px">
          &nbsp&nbsp请输入正确的答案 <P  style="float: right;margin-right: 25px;font-size: 18px;margin-top: -2px;"><el-icon class="el-icon-timer"></el-icon>倒计时:{{minutes}}:{{seconds}}</P>
        </div>
        <div style="width: 95.8%;height: 400px;background-color: rgb(255,255,255);margin-top: 10px;padding: 25px">
          {{topic}}<br><br><br><br><br><br><br><br>
          <el-input style="width: 25%" v-model="answers[questionIdNow-1]" placeholder="请输入你的答案"></el-input>
        </div>
        <div style="width: 100%;height: 64px;background-color: rgb(255,255,255);margin-top: 10px;font-size: 25px;">
          <span  style="color: #2874cb;cursor: pointer;margin-left: 36%;">
            <span @click="priorQuestion"><icon class="el-icon-arrow-left"></icon>上一题  &nbsp&nbsp</span>
            <span @click="nextQuestion">&nbsp&nbsp下一题<icon class="el-icon-arrow-right"></icon></span>
          </span>
        </div>
      </div>
    </div>
  </el-main>
  </el-container>
</template>

<script>
import axios from "axios";

export default {
  name: "onlineTest",
  data(){
    return{
      userInfo: '',
      course: '',
      answer: '',
      answers: [null,null,null,null,null,null,null],
      rightAnswers: [null,null,null,null,null,null,null],
      problemIds: [1,2,3,4,5,6,7],
      exam: '',
      examId: '',
      question: '',
      questionIdNow: 1,
      topic:'',
      dialogVisible: false,
      dialogVisible1: false,
      score: null,
      minutes: 10,
      seconds: 0
    }
  },
  created() {
    this.startCountdown();
  },
  methods:{
    startCountdown() {
      this.timer = setInterval(() => {
        if (this.seconds > 0) {
          this.seconds--;
        } else {
          if (this.minutes === 0) {
            clearInterval(this.timer); // 清除定时器
            this.timerComplete(); // 调用倒计时完成时的函数
          } else {
            this.minutes--;
            this.seconds = 59;
          }
        }
      }, 1000); // 每秒执行一次
    },
    timerComplete() {
      // 在倒计时完成时需要执行的函数
      this.computeScore();
      this.exitTest();
    },
    toClassDetail(courseId){
      this.$router.push({name:"classDetail",params:{courseId}})
    },
    exitTest(){
      this.dialogVisible1 = false;
      axios.post("http://localhost:8081/exam/submitExam",{
        studentId: this.userInfo.stuId,
        examId: this.examId,
        score: this.score,
        status: "已提交"
      }).then(response=>{
        if(response.status === 200){
          this.$message.success("提交成功!");
          this.toClassDetail(this.course.courseId);
        }
      })
    },
    computeScore(){
      this.score = 0;
      for(let i = 0;i < this.rightAnswers.length;i++){
        if(i < 5){
          if(parseInt(this.answers[i]) === this.rightAnswers[i])
            this.score += 10;
        }else{
          if(parseInt(this.answers[i]) === this.rightAnswers[i])
            this.score += 25;
        }
      }
      this.dialogVisible = false;
      this.dialogVisible1 = true
    },
    priorQuestion(){
      if(this.questionIdNow !== 1){
        this.questionIdNow -= 1;
        this.showProblem(this.questionIdNow);
      }
    },
    nextQuestion(){
      if(this.questionIdNow !== 7){
        this.questionIdNow += 1;
        this.showProblem(this.questionIdNow);
      }
    },
    showProblem(problemId){
      this.questionIdNow = problemId;
      axios.post("http://localhost:8081/exam/selectQuestionById",{
        questionId: this.exam.problems[problemId-1]
      }).then(response =>{
        if(response.status === 200){
          this.question = response.data;
          this.topic = '第' + problemId + '题:\t' + this.question.topic;
        }
      })
      switch (problemId){
        case 1 :
          document.getElementById("question1").style.border = "2px solid deepskyblue";
          document.getElementById("question2").style.border = "";
          document.getElementById("question3").style.border = "";
          document.getElementById("question4").style.border = "";
          document.getElementById("question5").style.border = "";
          document.getElementById("question6").style.border = "";
          document.getElementById("question7").style.border = "";
          break;
        case 2 :
          document.getElementById("question2").style.border = "2px solid deepskyblue";
          document.getElementById("question1").style.border = "";
          document.getElementById("question3").style.border = "";
          document.getElementById("question4").style.border = "";
          document.getElementById("question5").style.border = "";
          document.getElementById("question6").style.border = "";
          document.getElementById("question7").style.border = "";
          break;
        case 3 :
          document.getElementById("question3").style.border = "2px solid deepskyblue";
          document.getElementById("question1").style.border = "";
          document.getElementById("question2").style.border = "";
          document.getElementById("question4").style.border = "";
          document.getElementById("question5").style.border = "";
          document.getElementById("question6").style.border = "";
          document.getElementById("question7").style.border = "";
          break;
        case 4 :
          document.getElementById("question4").style.border = "2px solid deepskyblue";
          document.getElementById("question3").style.border = "";
          document.getElementById("question2").style.border = "";
          document.getElementById("question1").style.border = "";
          document.getElementById("question5").style.border = "";
          document.getElementById("question6").style.border = "";
          document.getElementById("question7").style.border = "";
          break;
        case 5 :
          document.getElementById("question5").style.border = "2px solid deepskyblue";
          document.getElementById("question4").style.border = "";
          document.getElementById("question2").style.border = "";
          document.getElementById("question1").style.border = "";
          document.getElementById("question3").style.border = "";
          document.getElementById("question6").style.border = "";
          document.getElementById("question7").style.border = "";
          break;
        case 6 :
          document.getElementById("question6").style.border = "2px solid deepskyblue";
          document.getElementById("question5").style.border = "";
          document.getElementById("question2").style.border = "";
          document.getElementById("question4").style.border = "";
          document.getElementById("question3").style.border = "";
          document.getElementById("question1").style.border = "";
          document.getElementById("question7").style.border = "";
          break;
        case 7 :
          document.getElementById("question7").style.border = "2px solid deepskyblue";
          document.getElementById("question6").style.border = "";
          document.getElementById("question2").style.border = "";
          document.getElementById("question4").style.border = "";
          document.getElementById("question5").style.border = "";
          document.getElementById("question1").style.border = "";
          document.getElementById("question3").style.border = "";
          break;
      }
    },
  },
  mounted() {
    const userInfoString = localStorage.getItem('userInfo');
    const course = localStorage.getItem('course');
    if (userInfoString) {
      this.userInfo = JSON.parse(userInfoString);
    }
    if(course){
      this.course = JSON.parse(course);
    }
    this.examId = this.$route.params.examId;
    axios.post("http://localhost:8081/exam/selectExamById",{
      examId: this.examId
    }).then(response =>{
      if(response.status === 200){
        this.exam = response.data;
        this.exam.problems = JSON.parse(this.exam.problems);
        for(let i = 0;i<this.exam.problems.length;i++) {
          axios.post("http://localhost:8081/exam/selectQuestionById", {
            questionId: this.exam.problems[i]
          }).then(response => {
            if (response.status === 200) {
              this.rightAnswers[i] = JSON.parse(response.data.answer);
            }
          })
        }
      }
    })
  },
  beforeUnmount() {
    clearInterval(this.timer); // 在组件销毁前清除定时器
  }
}
</script>

<style scoped>
.left{
  width: 15%;
  padding: 15px;
  float: left;
}
.right{
  width: 80%;
  padding: 15px;
  float: left;
}
</style>
